<!-- 详情 -->
<template>
  <div class="page-box h100 display-flex czbj au dsfsdfsdrtwertt" :class="isyk?'act':''">
    <div class="" v-if="!isyk">
      <n-button type="primary"  size="medium" @click="hf('hhorderManagementList')">
        <i class=" iconfont dx-left cz fz20"></i> 返回上一页
      </n-button>
      <span class="ml20">录入订单</span>
    </div>
    <div v-else class="fz32 cen">
      鸿鹄生产订单排配系统

    </div>
    <div class=" display-flex flex-1 mt20">
      <div class="dessdxq-left">

        <n-form ref="formRef" :rules="rules" :model="fromData" label-width="100" :inline="false" label-placement="left">
          <n-grid :cols="24" :x-gap="20">
            <n-form-item-gi span="24" label="订单编号:" path="order_num">

              <!-- <div class="pt5 sz">
                {{ fromData.order_num }}
                <span class="ls ml20" @click="fuzhisdr">复制</span>
              </div> -->

              <n-input type="text" v-model:value="fromData.order_num" placeholder="请输入订单编码" size="medium" clearable
                v-if="!isbj"></n-input>
              <div v-else class="pt5 sz">
                {{ fromData.order_num }}
                <span class="ls ml20" v-if="types != 3"  @click="showModal = true">点击修改</span>
              </div>
            </n-form-item-gi>
            <n-form-item-gi span="24" label="客户代码:" path="client_code">
              <n-input type="text" v-model:value="fromData.client_code" placeholder="请输入客户代码" size="medium" clearable
                v-if="!isbj"></n-input>
              <div v-else class="pt5 sz">
                {{ fromData.client_code }}
                <span class="ls ml20" v-if="types != 3"  @click="showModal = true">点击修改</span>
              </div>
            </n-form-item-gi>
            <n-form-item-gi span="24" label="订单日期:">
              <n-date-picker v-model:value="fromData.date" type="date" clearable v-if="!isbj" :format="format"/>
              <div v-else class="pt5 sz" >
                {{ transferTimeYMD(fromData.date) }}
                <span class="ls ml20" v-if="types != 3"  @click="showModal = true">点击修改</span>
              </div>
            </n-form-item-gi>
            <n-form-item-gi span="24" label="物料代码:" path="material_code" v-if="types != 3">
              <n-input v-model:value="fromData.material_code" type="textarea" rows="4" placeholder="请输入物料代码" size="medium"
                clearable></n-input>
            </n-form-item-gi>
            <n-form-item-gi span="24" label="品名:" path="type_name" v-if="types != 3">
              <n-input v-model:value="fromData.type_name" type="textarea" rows="4" placeholder="请输入品名" size="medium"
                clearable></n-input>
            </n-form-item-gi>
            <n-form-item-gi span="24" label="数量:" path="order_sum" v-if="types != 3">
              <n-input v-model:value="fromData.order_sum" type="textarea" rows="4" placeholder="请输入数量" size="medium"
                clearable></n-input>
            </n-form-item-gi>
            <n-form-item-gi span="24" label="规格型号:" v-if="types != 3">
              <n-input v-model:value="fromData.specifications_models" type="textarea" rows="4" placeholder="请输入规格型号"
                size="medium" clearable></n-input>
            </n-form-item-gi>
            <n-form-item-gi span="24" label="完成品交期:" path="commit_date" v-if="types != 3">
              <n-input v-model:value="fromData.commit_date" type="textarea" rows="4" placeholder="请输入完成品交期" size="medium"
                clearable></n-input>
                <p class="z9 fz12">
                  日期格式：如9月1日
                </p>
            </n-form-item-gi>
          </n-grid>
        </n-form>
      </div>
      <div class="pl10 pr10 vertical-center" v-if="types != 3">
        <n-button type="primary" size="medium" class="sddsftrtre" @click="daoru" :loading="lodjxertwe">
          导入 <i class=" iconfont dx-right"></i>
        </n-button>

      </div>
      <div class="flex-1 " v-if="Tabdata">
        <div class="kkfdsgerert">
          <div>
            <n-button type="primary" size="medium" @click="ishowssfd">
              全部{{ !iszls ? '展开' : "收起" }}
            </n-button>

            <n-button type="primary" size="medium"  v-if="types != 3"  @click="pilfs" class="ml20" :disabled="!righttids">批量发送工单</n-button>
            <n-button size="medium"  v-if="types != 3" @click="cexiaogdcex" class="ml20" :disabled="!righttids">批量撤销</n-button>
          </div>
          <n-data-table :row-props="rowProps" class="mt20" :columns="columns" :data="Tabdata" :row-key="rowKey"
            @update:checked-row-keys="handleCheck" :default-expand-all="expandall" v-if="showTable" />
        </div>
      </div>
    </div>
    <!-- <div class="jkjnjmxertw  vertical-center">
      <div>
        <n-button size="medium" @click="hf('hhorderManagementList')">返回上一页</n-button>
        <n-button type="primary" size="medium" @click="showModal = true" class="ml20" v-if="isbj&&types!=3">修改订单信息</n-button>
      </div>
    </div> -->

    <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>修改订单信息</div>
      </template>
      <div>
        <n-form label-width="120" label-placement="left" class="mt20">
          <n-grid :cols="24" :x-gap="20">
            <n-form-item-gi span="12" label="订单编号:" path="pre_working_hours">
              <n-input v-model:value="jjnkser.order_num" placeholder="请输入订单编号" size="medium" />
            </n-form-item-gi>
            <n-form-item-gi span="12" label="客户代码:" path="pre_working_hours">
              <n-input v-model:value="jjnkser.client_code" placeholder="请输入客户代码" size="medium" />
            </n-form-item-gi>
            <n-form-item-gi span="12" label="订单日期:" path="pre_working_hours">
              <n-date-picker v-model:value="jjnkser.date" type="date" clearable :format="format"/>
            </n-form-item-gi>

          </n-grid>
        </n-form>

      </div>
      <template #action>
        <div class="tr">
          <n-button @click="showModal = false"> 取消 </n-button>
          <n-button type="primary" size="medium" @click="querenfun" class="ml20">确认</n-button>
        </div>
      </template>
    </n-modal>


    <n-modal v-model:show="showModaler" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>修改</div>
      </template>
      <div>
        <n-form label-width="120" label-placement="left">
          <n-grid :cols="24" :x-gap="20">
            <n-form-item-gi span="12" label="物料代码:">
              <n-input v-model:value="jjnsete.material_code" placeholder="请输入物料代码" size="medium" />
            </n-form-item-gi>

            <n-form-item-gi span="12" label="品名:">
              <n-input v-model:value="jjnsete.type_name" placeholder="请输入品名" size="medium" />
            </n-form-item-gi>
            <n-form-item-gi span="12" label="数量:">
              <n-input v-model:value="jjnsete.order_sum" placeholder="请输入数量" size="medium" />
            </n-form-item-gi>
            <n-form-item-gi span="12" label="规格型号:">
              <n-input v-model:value="jjnsete.specifications_models" placeholder="请输入规格型号" size="medium" />
            </n-form-item-gi>
            <n-form-item-gi span="12" label="完成品交期:">
              <n-input v-model:value="jjnsete.commit_date" placeholder="请输入完成品交期" size="medium" />
            </n-form-item-gi>

          </n-grid>
        </n-form>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="showModaler = false"> 取消 </n-button>
          <n-button type="primary" size="medium" @click="xiugaidxsdfun" class="ml20">确认</n-button>
        </div>
      </template>
    </n-modal>



  </div>
</template>
<script lang='ts' setup>
import { ref, h } from "vue";
import { NButton } from "naive-ui";
import zttable from "./components/zttable.vue"
import dxtoolip from "./components/dxtoolip.vue"
import { dxwarning, dxpost, qurl, dxget, callBack, hf, transferTimeYMD,dialog, transferTimeYMDHmxqer,transferTimeseer } from "../../../util/index"
const formattedValue = ref(null)
const gongxuInpt = ref()
const gxshowModal = ref(false)
const formRef = ref()
const cz = qurl()
const isyk = cz.ck==3?true:false
const iszls  = ref(false)
const isbj = ref(false) // 是否为编辑的状态
const orid = ref()
const righttids = ref()
const dxrttwer = ref([])
const scList = ref()
const showModal = ref(false)
const showModaler = ref(false)
const expandall = ref(true)
const showTable = ref(true)
const types = ref(cz.type)
const lodjxertwe = ref(false)
const format = 'yyyy年MM月dd日'
const jjnkser = ref({
  order_num: "",
  client_code: "",
  date: null
})
const idssd = ref([])

const sendWorkOrder = async (rowID, status, processesId,produce_manager) => {
  await dxpost("hhscdd/orderMeg/sendWorkOrder", { id: rowID, status, processesId,produce_manager });
  window.$message.success("操作成功！")
}
const ishowssfd = () => {
  // showTable.value = false
  // setTimeout(() => {
  //   showTable.value = true
  //   if (expandall.value) {
  //     expandall.value = false
  //   } else {
  //     expandall.value = true
  //   }
  // }, 100);
    if(iszls.value){
      iszls.value = false
    }else{
      iszls.value = true
    }


  Tabdata.value.map(a=>{
 
    a.zk= !iszls.value
  })
}

// setTimeout(() => {
//   ishowssfd()
// }, 100);

// setTimeout(() => {
//   ishowssfd()
// }, 100);

const jjnsete = ref({
  material_code: "",
  type_name: "",
  order_sum: "",
  specifications_models: "",
  commit_date: ""

})
const hjhnjse = ref()
const rowClassName = (row) => {
  console.log(row);
}
const gjjhsdre = () => {
  hjhnjse.value.tetse()
}
const rowProps = (data, index) => {
  return {
    style: "cursor: pointer;",
    onClick: () => {
      // if(Tabdata.value[index].zk){
      //   Tabdata.value[index].zk = false
      // }else{
      //   Tabdata.value[index].zk = true
      // }

    }
  };
}
const columns = ref([
  {
    type: "selection",
    disabled(row) {
      let jjxer = false
      try {
        jjxer = row.processes[0].id
        jjxer = false
      } catch (e) {
        jjxer = true
      }
      return row.whetherStartNot == 1 || jjxer
      // return row.whetherStartNot == 1&&!row.processes
    }
  },
  {
    type: 'expand',
    expandable: (row) => {
      return true
    },
    renderExpand: (rowData, m) => {
      let resce = "jknxer" + rowData.id

      return [
        h(zttable, {
          ref: resce,
          class: rowData.zk ? 'shouqier' : '',
          material_id: rowData.id,
          status: rowData.status,
          scList: scList.value,
          rowindex: m, rowData,
          onCallback: (data) => {
            Tabdata.value[m].processes = data
            // rowData.processes =data
          },
          onGetRef:(data)=>{
            Tabdata.value[m].ref = data
          }
        })
      ]
    }
  },

  {
    title: "id",
    key: "id",
    render(row, index) {
      return h("span", {
        class:"kkxsettwe",
        onClick: () => {
          if (Tabdata.value[index].zk) {
            Tabdata.value[index].zk = false
          } else {
            Tabdata.value[index].zk = true
          }
        }
      }, row.id)
    },
  },

  {
    title: "物料代码",
    key: "material_code",
    align: "center",
    render(row, index) {
      return h("span", {
        class:"kkxsettwe",
        onClick: () => {
          if (Tabdata.value[index].zk) {
            Tabdata.value[index].zk = false
          } else {
            Tabdata.value[index].zk = true
          }
        }
      }, row.material_code)
    },
  },
  {
    title: "品名",
    key: "type_name",
    align: "center",
    render(row, index) {
      return h("span", {
        class:"kkxsettwe",
        onClick: () => {
          if (Tabdata.value[index].zk) {
            Tabdata.value[index].zk = false
          } else {
            Tabdata.value[index].zk = true
          }
        }
      }, row.type_name)
    },
    
  },
  {
    title: "数量",
    key: "order_sum",
    align: "center",
    render(row, index) {
      return h("span", {
        class:"kkxsettwe",
        onClick: () => {
          if (Tabdata.value[index].zk) {
            Tabdata.value[index].zk = false
          } else {
            Tabdata.value[index].zk = true
          }
        }
      }, row.order_sum)
    },
  },
  {
    title: "规格型号",
    key: "specifications_models",
    align: "center",
    render(row, index) {
      return h("span", {
        class:"kkxsettwe",
        onClick: () => {
          if (Tabdata.value[index].zk) {
            Tabdata.value[index].zk = false
          } else {
            Tabdata.value[index].zk = true
          }
        }
      }, row.specifications_models)
    },
  },
  {
    title: "完成品交期",
    key: "commit_date",
    align: "center",
    render(row, index) {
      let kjjnxer  = transferTimeseer(row.commit_date) 
      return h("span", {
        class:"kkxsettwe",
        onClick: () => {
          if (Tabdata.value[index].zk) {
            Tabdata.value[index].zk = false
          } else {
            Tabdata.value[index].zk = true
          }
        }
      }, kjjnxer)
    },
  },
  {
    title: "工序",
    key: "processes",
    align: "center",
    className: 'upding',
    render(row) {
      try {
        const jjmer = []
        row.processes.map(a => {
          jjmer.push({
            process_code: a.process_code,
            status: a.status
          })
        })
        const lijser = []
        jjmer.map((a, b) => {
          let syjer = ''
          if (b < jjmer.length - 1) {
            syjer = '--'
          }
          let clsdwe = ""

          if (a.status == 1) {
            clsdwe = "hye"
          }
          if (a.status == 2) {
            clsdwe = "ls"
          }

          lijser.push(h('span', { class: clsdwe +' kkmsdasrer' }, a.process_code + syjer))
        })

        if (lijser.length <= 0) {


          return h("span", {
            class: "ls sz", onClick: () => {
              gxshowModal.value = true
              hjhnjse.value = "jknxer" + row.id
              console.log(hjhnjse.value);
            }
          }, '编辑工序')
        }
        return lijser

      } catch (e) {
        return '--'
      }
    }
  },
  {
    title: "操作",
    width: 160,
    align: "center",
    render(row) {
      if (types.value == 3) {
        return
      }
      let jhssrt = false
      const bj = h(NButton, {
        class: "fz12", type: "info", quaternary: true, size: "small", onClick() {
          jjnsete.value = JSON.parse(JSON.stringify(row))
          showModaler.value = true
        }
      }, "编辑")
      const compile = h(NButton, {
        class: "fz12", type: "info", quaternary: true, size: "small", async onClick() {
          await sendWorkOrder(row.id, 1, row.processes[0].id,row.processes[0].produce_manager)
          row.status = 1
        }
      }, "发送工单")
      const revocation = h(NButton, {
        class: "fz12", type: "info", quaternary: true, size: "small", async onClick() {
          console.log(row.processes);
          await sendWorkOrder(row.id, 0, row.processes[0].id,row.processes[0].produce_manager)

          
          row.status = 0
        }
      }, "撤销")

      let next = h(NButton, {
        class: "fz12", type: "info", quaternary: true, size: "small", async onClick() {
        
     
        const {data}:any = await dxget("hhscdd/orderMeg/getgx",{material_id:row.id})
          let kkmxs = null
          data.map(a=>{
            if((a.status==0||a.status==1)&&!kkmxs){
              kkmxs = a
            }
          })
          let types = 1
          if(kkmxs.status==1){
            types=2
          }
          const jxsd = await dialog("确认执行嘛？执行后无法回撤哦！")
          if(kkmxs.process_code=='QC'&&types==2){
            await dxpost("hhscdd/orderMeg/setkxsd",{id:row.id})
          }
  
       
          await dxpost("hhscdd/orderMeg/xihsdf",{id:kkmxs.id,types})
          row.ref() //重新请求表格数据
        }
      }, "下一步")

      let operationBtn = compile
      let isdel = h(NButton, {
        class: "fz12", type: "info", quaternary: true, size: "small", async onClick() {
          const cxis = await dxwarning("确认删除吗？")
          if (cxis == 1) {
            await dxpost("hhscdd/orderMeg/delorderMaterial", { id: row.id })
            window.$message.success("删除成功")
            getorderfun()
          }
        }
      }, "删除")
      if (row.status == 1) {
        operationBtn = revocation
        isdel = null
      }

      try {
        if (row.processes.length <= 0) {
          jhssrt = true
        }
      } catch (e) {

      }
      if (row.status == 2) {
        return h('span', { class: "z9" }, "已完成")
      }
      if (row.whetherStartNot == 1) {
        return [h('span', { class: "z9" }, "已进入开工工序"),next]
      }
      if(row.status==0){
        next = null
      }

      if (jhssrt) {
        return [
          h(dxtoolip),
          bj,
          isdel
        ]
      }

      return [
        operationBtn,
        bj,
        isdel,
        next
      ]
    }
  }
])
const renderCell = (value) => {
  console.log(value);
  // if (!value) {
  //   return h(NText, { depth: 3 }, { default: () => "未填写" });
  // }
  // return value;
}
const Tabdata = ref([])
const handleCheck = (data) => {
  righttids.value = data.join(",")
}
const rowKey = (row) => row.id;
const dqDate = new Date().getTime()
const fromData = ref({
  order_num: "", // 订单编号
  client_code: "", // 客户代码
  date: dqDate,//订单日期
  material_code: "", // 物料代码
  type_name: "",//品名
  order_sum: "",//数量
  specifications_models: "",//规格型号:
  commit_date: "" // 完成品交期

})
const pilfs = async () => {
  Tabdata.value.map(row => {
    righttids.value.split(",").map(async b => {
      if (row.id == b) {
        await sendWorkOrder(row.id, 1, row.processes[0].id,row.processes[0].produce_manager)
        row.status = 1
      }

    })
  })
}
const cexiaogdcex = async () => {
  Tabdata.value.map(row => {
    righttids.value.split(",").map(async b => {
      if (row.id == b) {
        await sendWorkOrder(row.id, 0, row.processes[0].id,row.processes[0].produce_manager)
        row.status = 0
      }

    })
  })
}

const rules = {
  order_num: {
    required: true,
    message: '请输入订单编号',
    trigger: 'blur'
  },
  client_code: {
    required: true,
    message: '请输入客户代码',
    trigger: 'blur'
  },
  material_code: {
    required: true,
    message: '请输入物料代码',
    trigger: 'blur'
  },
  type_name: {
    required: true,
    message: '请输入品名',
    trigger: 'blur'
  },
  order_sum: {
    required: true,
    message: '请输入数量',
    trigger: 'blur'
  },

  commit_date: {
    required: true,
    message: '请输入完成品交期',
    trigger: 'blur'
  }
}

const daoru = async () => {
  formRef.value.validate(async (errors) => {
    if (!errors) {
      // material_code.split(/[(\r\n)\r\n]+/)
      console.log(fromData.value);
      lodjxertwe.value = true
      const { data }: any = await dxpost('hhscdd/orderMeg/addorder', {
        orid: cz.id,
        ...fromData.value
      })
      lodjxertwe.value = false
      window.$message.success("操作成功！")
      hf('hhdetails?id=' + data)
      cz.id = data
      orid.value = data
      await getorderfun()

    } else {
      console.log(errors);
    }
  });
}
const getorderfun = async () => {
  expandall.value = true
  Tabdata.value = ""
  const { data }: any = await dxget("hhscdd/orderMeg/getorder", { orid: orid.value })
  fromData.value.order_num = data.order_num
  fromData.value.client_code = data.client_code
  fromData.value.date = new Date(data.date).getTime()

  jjnkser.value.order_num = data.order_num
  jjnkser.value.client_code = data.client_code
  jjnkser.value.date = new Date(data.date).getTime()



  const jkjsdda = []
  const jkjsddb = []
  const jkjsddc = []
  const jkjsddd = []
  const jkjsdde = []
  data.materialList.map(a => {
    if (a.material_code) {
      jkjsdda.push(a.material_code)
    }
    if (a.type_name) {
      jkjsddb.push(a.type_name)
    }
    if (a.order_sum) {
      jkjsddc.push(a.order_sum)
    }
    if (a.specifications_models) {
      jkjsddd.push(a.specifications_models)
    }
    if (a.commit_date) {
      jkjsdde.push(a.commit_date)
    }

  })

  fromData.value.material_code = ''
  fromData.value.type_name = ''
  fromData.value.order_sum = ''
  fromData.value.specifications_models = ''
  fromData.value.commit_date = ''

  Tabdata.value = data.materialList
  dxrttwer.value = []
  righttids.value = ""


  // setTimeout(() => {
  //   ishowssfd()
  // }, 100);

}
const getMaxid = async () => {
  const { data }: any = await dxget("hhscdd/orderMeg/getTheLastPost")
  fromData.value.order_num = transferTimeYMDHmxqer() + data
}

if (cz.id) {
  isbj.value = true
  orid.value = cz.id
  getorderfun()
} else {
  getMaxid()

}

const fuzhisdr = () => {
  navigator.clipboard.writeText(fromData.value.order_num)
  window.$message.success("复制成功！")
}
const cexiaogd = async () => {
  const cxis = await dxwarning("确认撤销吗？")
  if (cxis == 1) {
    await dxpost("hhscdd/orderMeg/delorderMaterial", { id: righttids.value })
    window.$message.success("撤销成功")
    getorderfun()
  }
}
const getmouldUserFun = async () => {
  const { data }: any = await dxget("hhscdd/hhbase/getmouldUser")
  scList.value = data
}
getmouldUserFun()

const querenfun = async () => {
  await dxpost("hhscdd/orderMeg/xgddfun", {
    id: cz.id,
    ...jjnkser.value
  })
  window.$message.success("修改成功！")
  showModal.value = false
  getorderfun()
}

const xiugaidxsdfun = async () => {
  await dxpost("hhscdd/orderMeg/xiugaidxsd", jjnsete.value)
  showModaler.value = false
  getorderfun()
}



</script>
<style scoped>
.dsfsdfsdrtwertt.act{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.dessdxq-left {
  width: 460px;
  height: 100%;
  position: sticky;
  top: 300px;
}

.sddsftrtre {
  width: 100px;
}

.kkfdsgerert {
  overflow: auto;
  max-height: 800px;
}
</style>